<template>
  <div class="Jgseek">
     <div id="Jgseek_head">
	  <div id="back_fare" v-on:touchstart="back_fare()">  
		 <span class="glyphicon glyphicon-menu-left"></span>
	  </div>
	  <span id="head_title">搜索结果</span>
	  <span  id="Aroute" v-on:touchstart="Aroute()">发起路线</span>
	</div>
	<div id="Jgseek_nave">
	    <ul>
		   <li v-for="(item,index) in items" v-on:touchstart="service_state(index)" :class="{liActive:index == isActive}">
		      <span>
			      {{item}}
			  </span>
		   </li>
		</ul>
	</div>
	<div id="Jgseek_main">
	    <div class="Jgseek_centent" v-bind:style="{left:e3+'vw'}">
		   <div id="page1">
		     <div>
			   <ul id="line_list">
			      <li v-for="(lineList,index) in lines_list">
				     <div class="line_head">
					    <span class="log_bus">
						<img src="static/imgs/common_icons_03.png"/>
						</span>
					    <span class="line_titles">
						 {{lineList.lineName}}
					    </span>
					 </div>
					 <div class="line-content">
					    <div class="starAdd">
						<span class="xb">下班</span>
						<span>18:30</span>
						<p class="upcar">
						</p>
						<p class="address_start">{{lineList.startAddress}}</p>
						</div>
						<div class="endAdd">
						<span>18:52</span>
						<p class="downcar">
						</p>
						<p class="address_start">{{lineList.endAddress}}</p>
						</div>
					 </div>
				  </li>
			   </ul>
			 </div>
		   </div>
		   <div id="page2">
		   222222222222222222222222222222222222222222222
		   </div>
		</div>
	</div>
	<div id="Jgseek_footer">
	   <span>
	        发起我的定制班线
	   </span>
	</div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      items:["已开通","未开通"],
	  isActive:0,
	  e3:0,
	  lines_list:[]
    }
  },
	activated(){
	    this.listSEEK(); 
	},
  methods:{
       listSEEK(){
	        var star =this.$store.state.startAdd;
			var end =this.$store.state.endAdd;
	        this.$axios.get("http://localhost/dudubas_site_seek.php?saddress="+star+"&eaddress="+ end).then(e1=>{
		           console.log(e1.data)
				   this.lines_list = e1.data
		   })
	   },
       back_fare(){
	       this.$router.push({
		     path:"/"
		   })
	   },
	   Aroute(){
	      this.$router.push({
		     path:"/Arouter"
		   })
	   },
	   service_state(ins){
	         if(ins == 0){
			     this.e3 = 0;
			 }else{
			    this.e3 = -100;
			 }
	        this.isActive=ins
			
	   }
  },
	computed:{
	      satrtAddress(){
		      return this.$store.state.startAdd;
		  },
		  endAddress(){
		      return this.$store.state.endAdd;
		  }
	}
}
</script>

<style scoped>
.Jgseek{
      background:#f1f1f1;
	  width:100%;
	  height:100vh;
	   position:fixed;
	  z-index:120;
   }
   #Jgseek_head{ 
           width:100%;
	       height:8vh;
           background:#ff4a39;		   
		   position:fixed;
		   line-height:8vh;
           text-align:center;
		  
		 }
 #back_fare{
    width:10vw;
	height:9vh;
	float:left;
	font-size:1.6rem;
	color:#ffffff;
	font-size:3rem;
	
}
#head_title{
        color:#ffffff;
		font-size: 1.6rem;
		margin-left:5vw;
		}
#Aroute{
    color:#ffffff;
		font-size: 1.6rem;
		margin-right:5vw;
		float:right;
}
#Jgseek_nave{
   position:fixed;
   top:8vh;
   width:100%;
   height:8vh;
   background:#ffffff;
}
#Jgseek_nave ul{
   width:100%;
   height:100%;
   display:flex;
   justify-content:center;
   align-items:center;
}	
#Jgseek_nave li{
   width:49.5%;
   height:50%;
   display:flex;
   justify-content:center;
   align-items:center;
   font-size:1.6rem;
}
#Jgseek_nave ul li:nth-child(2){
    border-left:1px solid #cccccc;
}	
.liActive{color:#ff4a39}
#Jgseek_main{
    width:100%;
	height:76vh;
	margin-top:16vh;
	overflow:hidden;
	position:relative;
	
}
#Jgseek_footer{
    width:100%;
	height:8vh;
	display:flex;
   justify-content:center;
   align-items:center;
	
}
.Jgseek_centent{
    height:76vh;
	width:200vw;
	position:absolute;
}

 #Jgseek_footer span{
    display:block;
	width:95%;
	height:90%;
	border:2px solid #ff4a39;
	border-radius:8px;
	display:flex;
   justify-content:center;
   align-items:center;
   color:#ff4a39;
   font-size:1.6rem;
 }
 #page2{
    float:left;
	 width:100vw;
	 height:100%;
	 overflow:scroll;
	
	 padding-left:2vw;
 }
 #page1{
      float:left;
     width:100vw;
	 height:100%;
	 overflow:scroll;
	
	 padding-left:2vw;
 }
 #line_list{
    padding-top:3vw;
 }
 #line_list li{
       margin-top:2vh;
      width:96vw;
	  height:20vh;
	 background:#ffffff;
	  border-radius:8px;
	  
 }
 .line_head{
    
	 background:#f8f8f8;
	  width:100%;
	  height:25%;
	  border-radius:8px 8px 0px 0px;
	  display:flex;
	  align-items:center;
 }
 .log_bus{
      margin-left:4%;
      display:inline-block;
      width:22px;
	  height:21px;
      background-image: url(../assets/kkk.png);
	  background-size:80px 267px;
	  background-position:-60px -111px;
     
 }
 .log_bus img{
     width:100%;
 }
 .line_titles{
      margin-left:6vw;
      color:#b6b6bb;
      font-size:1.6rem;	  
 }
 .line-content{
  padding-top:2vh;
  padding-bottom:2vh;
  padding-left:1vw;
  padding-right:1vw;
      width:100%;
	  height:75%;
	   border-radius:0px 0px 8px 8px;
 }
 .line-content div{
      height:50%;
	  width:100%;
	  
	  display:flex;
	  align-items:center;
	  position:relative;
 }
  .starAdd{
     padding-left:3vw;
	 font-size:1.6rem;
  }
 .starAdd p{
    margin-left:2vw;
   margin-top:0;
    margin-right:0;
	 margin-bottom:0;
	padding:0;
 }
 
 .upcar{
      
     
      width:22px;
	  height:20px;
      background-image: url(../assets/kkk.png);
	  background-size:80px 257px;
	   background-position:-60px -145px;
 }
 .endAdd{
     padding-left:3vw;
	 font-size:1.6rem;
	 
  }
 .endAdd p{
    margin-left:2vw;
   margin-top:0;
    margin-right:0;
	 margin-bottom:0;
	padding:0;
 }
 
 .downcar{
      
     
      width:22px;
	  height:20px;
      background-image: url(../assets/kkk.png);
	  background-size:80px 255px;
	   background-position:-60px -436px;
 }
 .xb{
      position:absolute;
	  right:0;
	  top:0;
 }
</style>
